<template>
    <div>
      <navCom />
      <p class="margin-top"></p>
      <div class="product-en main-width">
        <span class="theme-color theme-border-color">NEWS CENTER</span>
      </div>
      <ul class="page-nav main-width">
        <li><nuxt-link to="/mainPage/news">集团新闻</nuxt-link></li>
      </ul>
      <div class="news-main main-width">
        <div class="news-l">
          <div class="title-img">
            <img src="/img/news/jt-new.png" alt="" style="width: 100%">
            <!--<a href="news.html" style="display: block">-->
              <!--<div class="title-text" style="color:#fff">-->
                <!--<p>集团新闻</p>-->
                <!--<p>Corporate Dynamics</p>-->
              <!--</div>-->
            <!--</a>-->
          </div>
          <div class="recommend-news" id="tj">
            <nuxt-link :to="'/newsDetail/news/'+tjNews.id">
              <div class="recommend-news-img">
                <img :src="tjNews.title_img" alt="">
              </div>
              <p class="recommend-news-title">{{tjNews.title}}</p>
              <p class="recommend-news-sub-content theme-color02">{{tjNews.sub_content}}</p>
            </nuxt-link>
          </div>
        </div>
        <div class="news-r">
          <div class="news-content">
            <div class="news-title">{{newsContent.title}}</div>
            <div class="news-date" >发布时间: <span>{{newsContent.date}}</span></div>
            <div class="content" v-html="newsContent.content">

            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import navCom from '@/components/navComponent.vue'
  export default {
    components:{
      navCom
    },
    async asyncData({ $axios,params}) {
      // console.log(params)
      const content = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_jtxw_content?id='+params.id);
      const newsTj = await $axios.$get('http://tfngw.tfnhg.com//Api/New/get_tj');
      console.log(content)
      return {
        newsContent:content,
        tjNews:newsTj
      }
    },
  }
</script>

<style>
  .news-main{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .news-l{
    width: 32.2%;
    font-size: 0.15rem;
  }
  .news-r{
    width: 60.8%;
    font-size: 0.15rem;
  }
  .title-img{
    width: 100%;
    height:3.24rem;
    /*height:3.84rem;*/
    color:#fff;
    position:relative;
    /*background: url("~static/img/news/news-title-img.jpg") no-repeat center center/cover;*/
  }
  .title-img a{
    display: block;
    height:3.24rem;
    width: 100%;
  }
  .title-text{
    font-size: 0.15rem;
    position: absolute;
    left:0.187rem;
    bottom:0.14rem;
  }
  .recommend-news{
    margin-top: 0.77rem;
    width: 100%;
  }
  .recommend-news-img{
    width: 100%;
  }
  .recommend-news-img img{
    width: 100%;
  }
  .recommend-news-title{
    font-size: 0.2rem;
    margin: 0.1rem 0;
    line-height: 0.22rem;
  }
  .recommend-news-sub-content{
    line-height: 0.22rem;
    padding-bottom:0.1rem;
    border-bottom: 1px solid #e8e8e8;
  }
  .content p{
    line-height: 0.22rem;
    margin: 0.15rem 0;
  }
  .content img{
    max-width: 100%;
  }
  .news-title{
    font-size: 0.22rem;
    text-align: left;
  }
  .news-date{
    font-size: 0.13rem;
    text-align:right;
    margin: 0.2rem 0;
  }

</style>
